<template>
    <div class="roleBox">
        <!-- 面包屑 -->
        <el-bared></el-bared>
        <!-- 添加按钮 -->
        <el-button class="addBtn" type="success" @click="addMenu">添加</el-button>
        <!-- 角色表格 -->
        <v-list @edit="edit"></v-list>
        <!-- 角色弹框 -->
        <v-dialog :isShow="isShow" @offCheck="offCheck" :isAdd="isAdd" ref="dialog"></v-dialog>
    </div>
</template>

<script>
// 引入子组件
import vList from "./list.vue"
import vDialog from "./dialog.vue"
export default {
    data() {
        return {
            // 角色弹框状态
            isShow: false,
            // 是否为添加
            isAdd: true,
        };
    },
    // 注册组件
    components: {
        vList,
        vDialog
    },
    methods: {
        //点击添加菜单
        addMenu() {
            this.isShow = true
            this.isAdd = true
        },
        //关闭菜单弹框
        offCheck(e) {
            this.isShow = e
        },
        // 编辑
        edit(e) {
            this.isShow = true
            this.isAdd = false
            // 获取子节点调用回显方法
            this.$refs.dialog.getOneRole(e)
        }
    }
};
</script>

<style scoped lang="less">
.roleBox {
    .addBtn {
        margin-top: 30px;
        margin-bottom: 5px;
    }
}
</style>
